<template>
    <view class="Crad">
        <view class="Crad-info" :style="{ backgroundImage: 'url(' + headImg + ')' }">
            <text class="white size34 ellipsis_2">卡片名称卡片名卡片名称卡片名</text>
            <view class="row j-sb a-center m-top40 m-bot20">
                <view class="Remaining">
                    <text class="size26">剩余</text>
                    <text class="size32 m-left4 m-right4">6</text>
                    <text class="size26">次</text>
                </view>
                <text class="white h6">2025年9月15日到期</text>
            </view>
            <view class="row j-sb a-center m-top20" v-if="!Buy">
                <view class="d-flex a-center white">
                    <text class="size28 bold m-top20 m-right4">￥</text>
                    <text class="size60 bold">999</text>
                    <text class="size28 m-left10 m-top10">/ 9次</text>
                </view>
                <view class="d-flex f-column a-center">
                    <view class="Buynow">立即购买</view>
                    <text class="white h6 m-top10">已售：99份</text>
                </view>
            </view>
        </view>

        <view class="introduce">单次￥99，累计省￥999 卡片的摘要</view>
    </view>
</template>

<script>
    export default {
        props: ['Buy'],
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG'
            }
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .Crad {
        width: 690rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        overflow: hidden;
        margin: 0 auto;
        &-info {
            width: 100%;
            padding: 24rpx;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .Buynow {
                width: 180rpx;
                height: 66rpx;
                background-color: rgba(0, 0, 0, 0.4);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                color: white;
                border-radius: 10rpx;
            }
            .Remaining {
                padding: 2rpx 10rpx;
                background-color: rgba(0, 0, 0, 0.5);
                color: #ffffff;
            }
        }

        .introduce {
            width: 100%;
            padding: 20rpx 24rpx;
            position: relative;
            font-size: 28rpx;
            color: #999;
        }
        .introduce::before {
            content: '';
            width: 0;
            height: 0;
            border-left: 20rpx solid transparent; /* 左边框 */
            border-right: 20rpx solid transparent; /* 右边框 */
            border-bottom: 30rpx solid white; /* 下边框 */
            position: absolute;
            top: -28rpx;
            left: 50rpx;
            z-index: 10;
        }
    }
</style>
